<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>学生选课管理系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="/assets/css/main.css" rel="stylesheet" />
        <link rel="stylesheet" href="/assets/css/iconfont.css">
        <!--以下是jqGrid的样式文件-->
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/jquery-ui-1.8.16.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/common.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/listMenu.css" />
        <link rel="stylesheet" href="/assets/css/tip-green.css">
        <!--上面是jqGrid的样式文件-->
        <link rel="stylesheet" href="/assets/css/my.css">
        <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/png">
    </head>
    <body>
        <% include ./common/header.ejs %>
        <% include ./common/siderbar.ejs %>
        <div id="content">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 heading">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="javascript:;">学生清单</a></li>
                            <li><a href="/admin/student/import">导入学生</a></li>
                            <li><a href="/admin/student/add">逐个添加学生</a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <a id="show_tips" href="#"></a>
                    <div class="panel-body">
                        <a href="/student/download" class="btn btn-success" style="float: right;">下载学生数据</a>
                        <div class="container">
                            <div class="row col-md-4 col-md-offset-4 keyword_div">
                                <input type="text" placeholder="请输入查询关键词" id="keyword" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
                            </div>
                        </div>
                        <table id="list"></table>
                        <div id="pager"></div>
                        <input type="button" value="删除" class="btn btn-danger" id="delete_stu">
                    </div>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>
        <script src="/assets/js/jquery-1.8.3.min.js"></script>
        <script src="/assets/js/jquery.jqGrid.src.js" type="text/javascript"></script>
        <script src="/assets/js/grid.locale-cn.js" type="text/javascript"></script>
        <script src="/assets/js/listMenu.js" type="text/javascript"></script>
        <script src="/assets/js/bootstrap/bootstrap.js"></script>
        <script src="/assets/js/jquery.poshytip.js"></script>
    </body>
</html>

<script>
    $(function () {
        var table_name = {
            sid: '学号',
            sname: '姓名',
            sex: '性别',
            grade: '年级',
            password: '密码'
        }
        pageInit();

        function pageInit(){
            $("#list").jqGrid(
                {
                    url : '/student',
                    datatype : "json",
                    colNames : [ '学号', '姓名', '性别', '年级', '密码' ],
                    colModel : [
                        {name : 'sid',index : 'sid', align : "center", key: true},
                        {name : 'sname',index : 'sname', align : "center", editable : true},
                        {
                            name : 'sex',
                            index : 'sex',
                            align : "center",
                            editable : true,
                            edittype: "select",
                            editoptions : {
                                value : " 男 : 男 ; 女 : 女 "
                            },
                        },
                        {
                            name: 'grade',
                            index: 'grade',
                            editable: true,
                            edittype: "select",
                            editoptions : {
                                value : " 初一 : 初一 ; 初二 : 初二 ; 初三 : 初三 ; 高一 : 高一 ; 高二 : 高二 ; 高三 : 高三"
                            },
                            align: 'center',
                        } ,
                        {name : 'password',index : 'password',align : "center", editable : true},
                    ],
                    rowNum : 10,
                    rowList : [ 10, 20, 30 ],
                    sortname : 'sid',
                    viewrecords : true,
                    autowidth: true,
                    pager : '#pager',
                    width: '100%',
                    height: '100%',
                    cellEdit: true,
                    cellsubmit : "clientArray",
                    multiselect : true,
                    caption : "学生数据清单",
                    afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
                        console.log(rowid, cellname, value, iRow, isSecureContext);
                        $.ajax({
                            url: '/student/' + rowid,
                            type: 'post',
                            data: {
                                changeName: cellname,
                                [cellname]: value
                            },
                            success: function (data) {
                                // console.log(data)
                                var content = ""
                                if (data.result === "1") {
                                    content = '学号' + rowid + '的学生信息<span class="before_info">' + table_name[cellname] + '</span>已经成功修改为<span class="alter_info">' + value + '</span>'
                                }else {
                                    content = data.result
                                }
                                $('#show_tips').poshytip({
                                    content: content,
                                    className: 'tip-green',
                                    showOn: 'none',
                                    alignTo: 'target',
                                    alignX: 'inner-left',
                                    offsetX: -10,
                                }).poshytip('show').poshytip('hideDelayed', 4000);
                                $("#list").trigger("reloadGrid");
                            }
                        })
                    }
                });

            //动态结果搜索
            $("#keyword").on("input", function () {
                var keyword = $(this).val();
                $("#list").jqGrid('setGridParam',{
                    datatype:'json',
                    postData:{'keyword': keyword}, //发送数据
                    page:1
                }).trigger("reloadGrid"); //重新载入

                //提示列表更新
                $('#show_tips').poshytip({
                    content: '列表数据已更新',
                    className: 'tip-green',
                    showOn: 'none',
                    alignTo: 'target',
                    alignX: 'inner-left',
                    offsetX: -10,
                }).poshytip('show').poshytip('hideDelayed', 2000);
                $("#list").trigger("reloadGrid");
            })

            //获得多选的数据
            $("#delete_stu").click(function() {

                if (!confirm('确认要删除吗？此操作不能恢复！')) {
                    return
                }

                var sel_rows = $("#list").jqGrid('getGridParam', 'selarrrow');
                $.ajax({
                    url: '/student',
                    type: 'delete',
                    data: {
                        sel_rows
                    },
                    traditional: true,
                    success: function (data) {
                        if (data.result !== -1) {
                            alert('删除成功！')
                        }else {
                            alert('删除失败！')
                        }
                        $("#list").trigger("reloadGrid");
                    }
                })
            });
        }

        //自适应
        $(function(){
            $(window).resize(function(){
                $("#list").setGridWidth($('.panel-body').width());
            });
        });
    })
</script>